(function(window) {
    var $ = window.$,
        Vue = window.Vue;

    var factory = {
        /**
         * on 是开关打开的时候的数据
         * off 是开关关闭的时候的数据
         */
        props: ['value', 'on', 'off'],
        template: '<div class="mui-switch mui-switch-mini" @toggle="toggle" :class="{\'mui-active\':value}">' +
            '<div class="mui-switch-handle"></div>' +
            '</div>',
        data: function() {
            return {
                _switch: null
            };
        },
        methods: {
            _init: function() {
                if(this._switch) return;
                this._switch = $(this.$el).switch();
            },
            toggle: function(event) {
                var isActive = event.detail.isActive;
                var on = this.on === undefined ? true : this.on;
                var off = this.off === undefined ? false : this.off;
                this.$emit('input', isActive ? on : off);
                this.$emit('change', isActive ? on : off);
            }
        }
    };
    Vue.component('toggle', factory);
})(window);